<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
    </h:head>
    <h:body style="text-align:center">
        <p:growl id="mensajes"  life="10000" />
        <h:form>

            <p:panel header="Ingrese los Datos" style="width:1330px">
                <h:panelGrid columns="6" cellpadding="5">

                    <h:outputLabel for="codigo" value="Código:" />
                    <p:inputText value="0" id="codigo" required="true" label="codigo" disabled="true"/>

                    <h:outputLabel for="nombre" value="Nombre:" />
                    <p:inputText id="nombre" required="true" value="#{clienteBean.nombre}">
                        <f:validator validatorId="validateId"></f:validator>
                    </p:inputText>

                    <h:outputLabel for="documento" value="Documento:" />
                    <p:inputText value="#{clienteBean.documento}" id="documento" label="documento" />

                    <h:outputLabel for="direccion" value="Dirección:" />
                    <p:inputText value="#{clienteBean.direccion}" id="direccion" label="direccion" />

                    <h:outputLabel for="telefono" value="Teléfono:" />
                    <p:inputText value="#{clienteBean.telefono}" id="telefono" label="telefono" />

                    <h:outputLabel for="celular" value="Celular:" />
                    <p:inputText value="#{clienteBean.celular}" id="celular" label="celular" />

                    <h:outputLabel for="email" value="Email:" />
                    <p:inputText value="#{clienteBean.email}" id="email" label="email" />

                    <h:outputText value="Ciudad "/>  
                    <p:selectOneMenu value="#{clienteBean.ciudad.codigo}" >  
                        <f:selectItem itemLabel="Seleccione una opción" itemValue="" /> 
                        <f:selectItems value="#{ciudadBean.listaCiudades}" 
                                       var="ciu" 
                                       itemLabel="#{ciu.nombre}" itemValue="#{ciu.codigo}"/>   
                    </p:selectOneMenu>  

                </h:panelGrid>
                <f:facet name="footer">
                    <p:commandButton value="Guardar" action="#{clienteBean.insert}" oncomplete="handleRequest(xhr, status, args);"/>  

                    <script type="text/javascript">
                            function handleRequest(xhr, status, args) {
                                if (args.suceso) {
                                    alert('Guardado correctamente');
                                }else{
                                    alert('Ha ocurrido un error al intentar guardar');
                                }
                            }
                    </script>                    
                    <p:commandButton value="Cancelar" action="#{clienteBean.volverConsulta()}"/>
                    <p:commandButton value="Regresar" action="#{clienteBean.volverConsulta()}"/>
                </f:facet>
            </p:panel>

        </h:form>

    </h:body>
</html>